import React, { useEffect } from "react";
import "./App.css";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import "./index.css";
import ErrorPage from "./error-page";
import Contact from "./routes/contact";
import Root from "./routes/root";
import Test1 from "./pages/test";
import { getConfigAsync } from "@/store/app/appSlice";
import { useAppDispatch } from "./store/hooks";
import AdminLayout from "./components/layout";
import Home from "./pages/home";

function App() {
  const dispatch = useAppDispatch();

  useEffect(() => {
    dispatch(getConfigAsync({}));
  }, []);

  const router = createBrowserRouter([
    {
      path: "/",
      element: <AdminLayout />,
      errorElement: <ErrorPage />,
      children: [
        {
          path: "contacts/:contactId",
          element: <Contact />,
        },
        {
          path: "contacts/:contactId",
          element: <Contact />,
        },
        {
          path: "test1",
          element: <Test1 />,
        },
      ],
    },
  ]);
  return (
    <React.StrictMode>
      <RouterProvider router={router} />
    </React.StrictMode>
  );
}

export default App;
